<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>酒店管理</title>
		<script src="./js/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			function add(){
				let namme = $("name").val();
				let number = $("number").val();
				let phone = $("phone").val();
				let password = $("password").val();
				
				let rowItem = ` <tr>
			 <td>1</td>
			 <td>$(namme)</td>
			 <td>$(number)</td>
			 <td>$(phone)</td>
			 <td>$(password)</td>
			 <td><button type="button" onclick="del()">删除</button></td>
			 </tr>
			 $("tbody").append(rowItem);
			 }
			 function del(btn){
				 $(btn).parent().parent().remove();
			 }
		</script>
	</head>
	<body>
		<form>
			姓名：<input type="text" name=" "id="name" value="" /><br>
			房号：<input type="text" name="" id="number" value=""/>
			电话：<input type="text" name="" id="phone" value=""/>
			密码：<input type="text" name="" id="password" value=""/>
			<button type="button" onclick="add()">添加</button>
		</form>
		
		<table border="1px" cellpadding="0" cellspacing="0">
			<thead>
				<th>序号</th>
				<th>姓名</th>
				<th>房号</th>
				<th>电话</th>
				<th>密码</th>
				<th>操作</th>
			</thead>
		</table>
	</body>
</html>
